<template>
  <div class="authorization-container">
    <div class="auth-card">
      <h2 class="title">系统授权验证</h2>

      <div v-if="!isAuthorized" class="auth-form">
        <el-form ref="authForm" :model="authForm" :rules="authRules" label-width="100px">
          <el-form-item label="授权码" prop="authCode">
            <el-input
              v-model="authForm.authCode"
              placeholder="请输入系统授权码"
              show-password
            />
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              @click="submitAuthorization"
              :loading="loading"
              style="width: 100%"
            >
              验证授权
            </el-button>
          </el-form-item>
        </el-form>

        <div class="auth-info">
          <p>系统需要有效的授权才能正常使用</p>
          <p>请联系系统管理员获取授权码</p>
        </div>
      </div>

      <div v-else class="auth-success">
        <el-result
          icon="success"
          title="授权验证通过"
          subTitle="系统可以正常使用">
          <template slot="extra">
            <el-button type="primary" @click="goToHome">进入系统</el-button>
          </template>
        </el-result>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Authorization",
  data() {
    return {
      loading: false,
      isAuthorized: false,
      authForm: {
        authCode: ''
      },
      authRules: {
        authCode: [
          { required: true, message: '请输入授权码', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    // 检查是否已经授权
    this.checkCurrentAuthorization();
  },
  methods: {
    checkCurrentAuthorization() {
      const authInfo = localStorage.getItem('app_auth_info');
      if (authInfo) {
        try {
          const auth = JSON.parse(authInfo);
          const expireTime = new Date(auth.expireTime).getTime();
          const currentTime = new Date().getTime();

          if (currentTime <= expireTime) {
            this.isAuthorized = true;
          }
        } catch (e) {
          console.error('检查授权信息失败:', e);
        }
      }
    },

    submitAuthorization() {
      this.$refs.authForm.validate(valid => {
        if (valid) {
          this.loading = true;

          // 模拟授权验证过程
          setTimeout(() => {
            // 这里应该调用实际的授权验证接口
            // 示例验证逻辑
            if (this.authForm.authCode === 'valid_auth_code_2025') {
              // 授权成功，保存授权信息
              const authInfo = {
                authorized: true,
                expireTime: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000), // 30天后过期
                authTime: new Date()
              };
              localStorage.setItem('app_auth_info', JSON.stringify(authInfo));
              this.isAuthorized = true;
              this.$message.success('授权验证通过');
            } else {
              this.$message.error('授权码无效，请重新输入');
            }
            this.loading = false;
          }, 1000);
        }
      });
    },

    goToHome() {
      this.$router.push({ path: '/' });
    }
  }
}
</script>

<style scoped>
.authorization-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #f0f2f5;
  padding: 20px;
}

.auth-card {
  width: 100%;
  max-width: 500px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 30px;
}

.title {
  text-align: center;
  color: #303133;
  margin-bottom: 30px;
}

.auth-info {
  text-align: center;
  color: #909399;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

.auth-success {
  text-align: center;
}
</style>
